<template>
  <div>
    <PageDialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="dialog-table">
        <PageFilter
          v-model:query="filterInfo.query"
          :filter-list="filterInfo.list"
        >
          <template v-slot:filter-button>
            <div>
              <div class="dialog-table-header">
                <div class="header-left">
                  <div class="lable">产品名称：{{ info.commonName }}</div>
                  <div class="lable">生产批号：{{ info.batchNumber }}</div>
                </div>
              </div>
            </div>
          </template>
        </PageFilter>
      </div>
      <PageTable
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        v-model:query="filterInfo.query"
        :check-box="false"
        :tab-index="true"
        :listen-height="false"
        :pager="false"
        :field-list="tableInfo.fieldList"
      >
        <template v-slot:col-businessOrderNo="scope">
          <span class="slip-edit" @click="showDetail(scope.row)">{{
            scope.row.businessOrderNo
          }}</span>
        </template>
      </PageTable>
    </PageDialog>
  </div>
</template>

<script setup name="IndividualDetails">
import { getCustomizeSetting } from '@/api/customize'
import { getReceiptOrderDetailExtCustomizeListAll } from '@/api/receipt.js'
const { proxy } = getCurrentInstance()
const props = defineProps({
  showDialog: {
    type: Boolean,
  },
  pageStatus: {
    type: Boolean,
  },
  query: {
    type: Object,
    default: function () {
      return {}
    },
  },
  info: {
    type: Object,
    default: function () {
      return {}
    },
  },
})

const scanInput = ref('')
// 过滤相关配置
const systemConfig = ref(proxy.$store.state.permission.systemConfig)
const filterInfo = ref({
  keyword: '',
  query: {
    queryMap: {
      ...props.query,
    },
    queryParams: {},
    customizeUserVO: {},
  },
  list: [{ type: 'slot', value: 'button' }],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: null,
  data: [],
  selections: [],
  copyData: [],
  fieldList: [],
})
// 弹窗相关
const dialogInfo = ref({
  title: '明细详情',
  width: '90%',
  btLoading: false,
  btList: [{ label: '关闭', event: handleClose, show: true }],
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(val) {
    proxy.$emit('update:showDialog', val)
  },
})
let obj = {
  businessOrderNo: {
    label: '单号',
    value: 'businessOrderNo',
    componentType: 'input',
    show: false,
    type: 'slot',
    hidden: true,
  },
}
tableInfo.value.fieldList = Object.values({
  ...proxy.$fn.deepClone(proxy.$fieldfList.FieldList),
  ...proxy.$fn.deepClone(obj),
})
getCustomize()
function getCustomize() {
  let param = {
    tableKey:
      'receiptOrderDetailSingle-com.slip.spd.entity.vo.receipt.ReceiptOrderDetailVO',
  }
  getCustomizeSetting(param).then((res) => {
    if (res && res.success) {
      let data = res.data
      filterInfo.value.query.customizeUserVO = res.data
      tableInfo.value.fieldList = proxy.$fn.setFieldList(
        tableInfo.value.fieldList,
        data.detail
      )
      getList()
    }
  })
}
function getList() {
  getReceiptOrderDetailExtCustomizeListAll(filterInfo.value.query).then(
    (res) => {
      if (res && res.success) {
        tableInfo.value.data = res.data
      }
    }
  )
}
function showDetail(row) {
  proxy.$emit('callback', row)
  shows.value = false
}
// 关闭弹窗前的回调
function handleClose() {
  shows.value = false
}
</script>

<style scoped lang="scss">
:deep(.filter-item) {
  width: 100%;
}
.text-style {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-groups {
  display: flex !important;
  align-items: center;
}
</style>
